<!-- 三农课堂 -->
<template>
	<div class="box">
		<titleBox :title="'三农课堂'"></titleBox>
		<!-- <div class="tab">
			<li class="tab_item" v-for="(tab,idx) in dataList.tabList" :class="{active:dataList.tabId == tab.id}" @click="select(tab.id)">
				{{tab.name}}
			</li>
		</div> -->
		<div>
			
		</div>
		<div class="classroom_box" v-if="dataList.classRoomList.length">
			<!-- <classRoom v-for="(classRoom,i) in dataList.classRoomList" :status="1" :list="classRoom"></classRoom> -->
			<div v-if="dataList.classRoomList.length" v-for="(classRoom,i) in dataList.classRoomList" @click="goDetail(classRoom.classUuid)"
				class="classroom">
				<img :src="classRoom.coverImage" alt="">
				<p class="snp1">{{classRoom.className}}</p>
				<li>
					<span>主讲人：{{classRoom.classManager}}</span>
					<span>{{classRoom.classStatus}}人学习</span>
				</li>
			</div>


		</div>
		<div class="errorIcon" v-if="!dataList.classRoomList.length">
			<img src="../../assets/error.png" alt="">
			<p>暂无数据</p>
		</div>
		<div class="paging">
			<el-pagination :pager-count="5" background layout="prev, pager, next" :total="dataList.total"
				:current-page="dataList.page" @current-change="changesize" />
		</div>
	</div>
</template>

<script setup>
	import {
		searchHotOnlineClass
	} from '../../api/home.js'
	import classRoom from '../../components/classRoom.vue';
	import titleBox from '../../components/titleBox.vue';
	import {
		reactive,
		onBeforeMount
	} from 'vue';
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter()
	const dataList = reactive({
		total: 10,
		page: 1,
		tabId: 1,
		classRoomList: [],
		tabList: [{
				name: '全部',
				id: 1
			},
			{
				name: '三农政策',
				id: 2
			},
			{
				name: '法律法规',
				id: 3
			},
			{
				name: '文化素养',
				id: 4
			},
			{
				name: '农业生产技术',
				id: 5
			},
			{
				name: '农业经营管理',
				id: 6
			},
			{
				name: '农产品营销',
				id: 7
			},
			{
				name: '绿色发展',
				id: 8
			},
			{
				name: '乡村治理',
				id: 9
			}
		]
	})
	onBeforeMount(() => {
		getsearchHotOnlineClass()
	})
	const goDetail = (id) => {
		router.push({
			path: '/classDetail',
			query: {
				id
			}
		})
	}

	const select = (id) => {
		dataList.tabId = id
	}
	const changesize = (value) => {
		dataList.page = value
	}
	const getsearchHotOnlineClass = () => {
		var data = {
			page: {
				pageSize: 99
			},
			params: {
				classStatus: 2
			}
		}
		searchHotOnlineClass(data).then(res => {
			dataList.classRoomList = res.data.list
		})
	}
</script>

<style scoped lang="scss">
	.box {
		width: 1200px;
		margin: 30px auto;
		background-color: #FFFFFF;
		border-radius: 10px;
		padding: 30px;
		margin-top: 30px;

		.classroom_box {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.tab {
			display: flex;
			justify-content: space-between;
			margin-top: 30px;

			&_item {
				padding: 6px 20px;
				background: #F4F4F4;
				border-radius: 5px;
			}

			.active {
				background: #11918E;
				color: #FFFFFF;
			}
		}

		.classroom {
			width: 262px;
			height: 264px;
			background: #FFFFFF;
			overflow: hidden;
			border-radius: 10px;
			border: 1px solid rgba(17, 145, 142, 0.1);
			margin-top: 30px;
			margin-right: 30px;

			img {
				width: 262px;
				height: 174px;
			}

			p {
				width: 230px;
				margin: 15px;
			}

			li {
				width: 230px;
				margin: 15px;
				display: flex;
				justify-content: space-between;
			}
		}

		.classroom:nth-of-type(4n+0) {
			margin-right: 0;
		}
	}

	/* 分页 */
	.paging {
		width: 100%;
		margin-top: 30px;
		display: flex;
		justify-content: center;

		:deep(.is-active) {
			background-color: #11918E !important;
		}
	}
</style>